import Taro, { navigateTo } from '@tarojs/taro'
import { AtButton, AtCheckbox, AtMessage } from 'taro-ui'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { View, Button, Text, Image, Checkbox } from '@tarojs/components'
import './MPLogin.scss'
import logo from '../../images/logo.png'
import { loginWXMP } from '../../actions/login'

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

interface MPLoginState {
  rulesChecked: Boolean,
  rulesSelectList: Array<String>
}

@connect(({ login, user }) => ({
  login, user
}), (dispatch) => ({
  toLogin: () => {
    return new Promise((resolve, reject) => {
      dispatch(loginWXMP())
    })
  }
}))
class MPLogin extends Component<any, MPLoginState> {

  constructor(props) {
    super(props);
    this.state = {
      rulesChecked: false,
      rulesSelectList: [0]
    }
  }
  
  componentWillReceiveProps (nextProps) {
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  wechatMPLoginClick () {
    if (this.state.rulesChecked) {
      return
    }
  }

  onCheckChange (value) {
    this.setState({
      rulesSelectList: value
    })
    // console.log(this.state.selectedList)
    // console.log(this.state.rulesChecked)
    // this.setState({
    //   rulesChecked: false
    // })
  }

  onWXGetUserInfo (value) {
    let detail = value.detail
    let boolFlag: String = detail.errMsg.split(':')[1]
    if (boolFlag === 'ok') {
      // 用户授权成功
      this.props.toLogin().then(() => {
        if (this.props.login.token.access_token !== '') {
          navigateTo({url: '/pages/index/index'})
        }
      }).catch(e => {
        Taro.atMessage({
          'message': '登录失败',
          'type': 'error',
        })
      })
      // Taro.login({
      //   success: (res => {
      //     this.props.toLogin({
      //       ...detail,
      //       code: res.code,
      //       appId: 'wxa464dec47728aee5'
      //     })
      //     // console.log(detail)
      //   })
      // })
    }
  }

  handleTest () {
    // console.log(this.props.toLogin('123','123'))
  }

  onGetPhoneNumber

  render () {
    if (this.props.user.user.userInfo.nickName !== '') {
      Taro.navigateBack()
      // Taro.navigateTo({url: '/pages/index/index'})
    }
    let mpRules = [
      {
        value: 'rules1',
        label: '同意爱骑出行用户协议',
        desc: ''
      }
    ]

    return (
      <View className='auth-box'>
        <AtMessage />
        <View
          className='auth-logo'
        >
          <Image
            mode='aspectFit'
            src={logo}
          >
          </Image>
        </View>
        <View
          className='auth-form'
        >
          <AtButton type='primary' openType='getUserInfo' onGetUserInfo={this.onWXGetUserInfo.bind(this)}>获取用户信息</AtButton>
          {/* <AtButton type='primary' openType='getPhoneNumber' onGetPhoneNumber={this.onGetPhoneNumber.bind(this)}>获取手机号</AtButton> */}
        </View>
        {/* <View style='margin-top: 2rem'>
          <AtCheckbox
            selectedList={this.state.rulesSelectList}
            options={mpRules}
            onChange={this.onCheckChange.bind(this)}
          />
        </View> */}
      </View>
    )
  }
}

export default MPLogin

